<template>
  <div class="searchContainer">
    <p id="p1">人口搜索</p>
    <input
      type="text"
      placeholder="支持搜索人名、手机号、身份证号"
      id="input1"
    />
    <img :src="require('@/assets/pic2/' + searchIMG + '.png')" id="img1" />
    <transition name="resultListFade">
      <div class="resultList" v-show="resultShow">
        <div v-for="(data, index) in searchResult" :key="index">
          <p class="name">{{ data.name }}</p>
          <img src="@/assets/pic2/定位.png" alt="" />
          <span class="address">({{ data.address }})</span>
          <img src="@/assets/pic2/转到.png" class="button" />
        </div>
      </div>
    </transition>
    <img src="@/assets/pic2/暂无搜索内容.png" id="empty" v-show="emptyResult" />
    <p id="p2" v-show="emptyResult">搜索结果为空</p>
  </div>
</template>

<script>
/* eslint-disable */
import axios from "axios";
import pubsub from "pubsub-js";
import { getCurrentInstance, onMounted } from "@vue/runtime-core";
import url from "@/components/URL.json";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default {
  name: "search",
  data() {
    return {
      resultShow: false,
      emptyResult: false,
      searchResult: [],
      peopleList: [],
      searchIMG: "搜索(未选中)",
      myRouter: {},
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const router = useRouter();
    const store = useStore();

    onMounted(() => {
      bindSearch();
      // 获取焦点
      var input = document.querySelector("#input1");
      var value = input.value;
      input.focus();
      input.setSelectionRange(0, value.length);
    });
    //搜索方法
    function bindSearch() {
      let node = Array.from(document.querySelectorAll("#input1"))[0];
      // 绑定输入框按回车执行搜索
      node.addEventListener("keydown", (e) => {
        // 按键码匹配
        if (e.keyCode === 13) {
          let value = e.target.value;
          console.log(value);
          // 发送至后端
          axios({
            method: "get",
            url: url.basicURL + "searchPeople",
            params: { value: value },
          }).then((res) => {
            proxy.resultShow = false;
            proxy.emptyResult = false;
            console.log(res.data);
            proxy.searchResult = [];
            proxy.peopleList = res.data;
            res.data.forEach((element) => {
              proxy.searchResult.push({
                name: element.XM,
                address: element.JZD,
              });
            });
            setTimeout(() => {
              proxy.resultShow = true;
            }, 300);
            //缺省页填充
            if (proxy.searchResult.length === 0) proxy.emptyResult = true;
          });
        }
      });
    }
    // 路由跳转
    function routerPush() {
      store.commit("clearDataP");
      router.push({
        path: "/peopleSelected",
      });
    }

    return { routerPush };
  },
  watch: {
    searchResult() {
      setTimeout(() => {
        // 获取元素列表
        let nodeList = Array.from(document.querySelectorAll(".button"));
        // 点击事件
        nodeList.forEach((node) => {
          node.addEventListener("click", () => {
            let name = Array.from(event.target.parentNode.children)[0]
              .innerHTML;
            this.peopleList.forEach((element) => {
              if (element.XM === name) {
                // 人员信息发布
                pubsub.publish("peopleSelected", element);
                // 人员页面跳转
                this.routerPush();
                pubsub.publish("FirstPageShow", "@@");
              }
            });
          });
        });
      }, 500);
    },
  },
};
</script>

<style lang="less" scoped>
#empty {
  width: 70%;
  margin-left: 15%;
}
.searchContainer {
  height: 100%;
  > #p1 {
    background-image: ~"url(@{app-images-root}/button_bg1.png)";
    background-size: 100% 100%;
    height: 5%;
    color: #1296db;
    font-size: 170%;
    font-weight: bold;
    text-align: center;
    padding-top: 3%;
  }
  > #p2 {
    color: #1296db;
    font-weight: bold;
    font-size: 150%;
    text-align: center;
  }
  > .resultList {
    position: relative;
    top: 1%;
    max-height: 89%;
    overflow-y: scroll;
    width: 98%;
    margin-left: 1%;
    > div {
      position: relative;
      top: 1.5%;
      width: 97%;
      padding: 1.5% 0%;
      margin-left: 1.5%;
      // border-bottom: rgb(187, 187, 187, 0.2) 1px solid;
      > .name {
        color: #1296db;
        font-size: 150%;
        font-weight: bold;
      }
      > img {
        width: 4.5%;
        margin-bottom: 0.7%;
      }
      > .address {
        color: white;
        font-size: 90%;
      }
      > .num {
        font-size: 90%;
      }
      > .button {
        float: right;
        position: relative;
        right: 2%;
        outline: none;
        border: none;
        margin-top: -6%;
        background-color: transparent;
        width: 10%;
      }
    }
  }
}
.resultList::-webkit-scrollbar {
  width: 0px;
}
.resultList > div:hover {
  background-color: rgba(223, 223, 223, 0.1);
}
#input1 {
  border: #1296db 2px solid;
  border-radius: 5px;
  width: 95%;
  height: 4%;
  position: relative;
  top: 1%;
  left: 2.5%;
  font-size: 150%;
  font-weight: bold;
  padding-left: 10%;
  color: white;
  padding-bottom: 1%;
  background-color: rgb(6, 19, 31);
}
#img1 {
  position: absolute;
  top: 6.7%;
  left: 4.5%;
  width: 7%;
}
input::placeholder {
  font-size: 90%;
  font-weight: normal;
}
.resultListFade-enter-active {
  transition: all 0.3s ease-out;
}

.resultListFade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.3, 1);
}

.resultListFade-enter-from,
.resultListFade-leave-to {
  transition: 0.3s;
  opacity: 0;
}
</style>